// variable global
var typeGet;
var namephoto;
var covertype;
var check = 1;
var y = 0;
var arrayPhoto = [];
var jsonPhoto = "";
(function($) {
    $.fn.extend({
        esRePosition: function(options) {
            var defaults = {
                replica: "replica",
                input: "input"
            };
            options = $.extend(defaults, options);
            return this.each(function() {
                //Plugin options
                var o = options;

                //Main object
                var $mask = $(this);
                var $id = $mask.attr("id");

                var $replica = $("#" + $id + "_" + $mask.data("replica"));
                if ($replica.length === 0) {
                    $replica = $("#" + $id + "_" + o.replica);
                }
                if ($replica.length > 0) {
                    var $img_replica = $("img", $replica);
                    $img_replica.width($replica.width());
                }
                var $input = $("#" + $id + "_" + $mask.data("input"));
                if ($input.length === 0) {
                    $input = $("#" + $id + "_" + o.input);
                }


                var $img = $("img", $mask);
                var $mask_w = $mask.width();
                var $mask_h = $mask.height();
                var $photo_org_w = $img.width();
                var $photo_org_h = $img.height();
                $img.width($mask_w);
                var $photo_w = $img.width();
                var $photo_h = $img.height();
                $max_margin = ($photo_h - $mask_h) * -1;
                $img.draggable({
                    axis: "y",
                    cursor: "move",
                    drag: function(event, ui) {
                        var $img = $("img", $mask);
                        var $mask_w = $mask.width();
                        var $mask_h = $mask.height();
                        var $photo_org_w = $img.width();
                        var $photo_org_h = $img.height();
                        $img.width($mask_w);
                        var $photo_w = $img.width();
                        var $photo_h = $img.height();
                        $max_margin = ($photo_h - $mask_h) * -1;
                        $topmarginpx = ui.position.top;
                        if ($topmarginpx > 0) {
                            ui.position.top = 0;
                        }
                        if ($topmarginpx < $max_margin) {
                            ui.position.top = $max_margin;
                        }
                        $topmarginpx = ui.position.top;
                        $topmarginpercent = $topmarginpx * 100 / $photo_h;
                        $("img", $replica).css("margin-top", $topmarginpercent + "%");
                        var y = -$topmarginpx;
                        $("#y").val(y);
                    
                    }
                });

                $(window).load(function() {

                });

            });
        }
    });
})(jQuery);

$(document).ready(function() {
    $("#mask2").esRePosition({
        replica: "replica2",
        input: "input2"
    });
    /* $(".viewImageAvatar").fancybox({
        'titlePosition'  : 'inside',
        'transitionIn'  : 'none',
        'transitionOut'  : 'none',
        'hideOnOverlayClick': false,
        'hideOnContentClick': false,
        'centerOnScroll'    : true,
        'autoScale': true,
        'beforeShow': function(){
            var width_fancybox = $('div.jcrop-holder').width()+200;
            $('#fancybox-crop-avt').attr('style', 'width: '+width_fancybox+'px; overflow: hidden;');
        },
    }); */
});

function resetCoverPhoto()
{
    var save_reset = document.getElementById('save-reset');
    var ele = document.getElementById('big-banner');
    save_reset.style.display = 'none';
    if (ele.style.display = 'none')
    {
        ele.style.display = 'block';
        $('#mask2').attr('style',"position: absolute; top: -1000px;");
    }
}
/*
$('#fancy-album-photo').fancybox({
    type: 'ajax',
    closeBtn : false,
    scrolling: 'no',
});
$('#fancy-album-avatar').fancybox({
    type: 'ajax',
    closeBtn: false,
    scrolling: 'no', 
});
*/
